<LandscapeLoaderVue v-if="levels.isLoading()" />
<div class="jhipster-landscape jhlite-menu-content-template" v-else data-testid="landscape">
  <div class="jhipster-landscape-modes-selection">
    <div class="jhlite-mode-switch">
      <div class="jhlite-mode-switch--modes">
        <button
          class="jhlite-button-switch"
          :class="modeSwitchClass('COMPACTED')"
          @click="selectMode('COMPACTED')"
          data-testid="compacted-mode-button"
        >
          Compacted
        </button>
        <button
          class="jhlite-button-switch"
          :class="modeSwitchClass('EXTENDED')"
          @click="selectMode('EXTENDED')"
          data-testid="extended-mode-button"
        >
          Extended
        </button>
      </div>
    </div>
  </div>
  <div class="jhipster-landscape-preset-selection">
    <LandscapePresetConfigurationVue :selectedPresetName="selectedPresetName" @selected="selectModulesFromPreset" />
  </div>
  <div class="jhlite-menu-content-template--content">
    <div class="jhipster-landscape-content">
      <div class="jhipster-landscape-content--header">
        <div class="jhipster-landscape-search-container">
          <div class="jhipster-landscape-search">
            <div class="jhlite-field--field">
              <input
                type="text"
                class="jhlite-input-text"
                placeholder="Search modules..."
                @input="performSearch($event.target.value)"
                data-testid="landscape-search-input"
              />
            </div>
          </div>
        </div>
      </div>

      <div
        :class="landscapeClass()"
        ref="landscapeContainer"
        data-testid="landscape-container"
        @mousedown="startGrabbing"
        @mousemove="grabbing"
        @mouseup="stopGrabbing"
        @mouseleave="stopGrabbing"
      >
        <div class="jhipster-landscape-levels">
          <ul class="jhipster-landscape-levels--level" :class="modeClass()" v-for="level in levels.value()">
            <li class="jhipster-landscape-element" v-for="element in level.elements" :class="modeClass()">
              <div
                class="jhipster-landscape-feature"
                :class="elementFlavor(element.slug())"
                :data-testid="`${element.slugString()}-feature`"
                v-if="isFeature(element)"
                :ref="el => landscapeElements.set(element.slugString(), el)"
              >
                <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.slugString() }}</h2>
                <ul class="jhipster-landscape-feature--modules">
                  <li class="jhipster-landscape-feature--module" v-for="module in element.modules">
                    <LandscapeModuleVue
                      :module="module"
                      :landscapeElements="landscapeElements"
                      :moduleFlavor="elementFlavor(module.slug())"
                      @over="emphasizeModule(module.slug())"
                      @out="deEmphasizeModule()"
                      @clicked="toggleModule(module.slug())"
                      @apply="applyModule(module.slug())"
                    />
                  </li>
                </ul>
              </div>

              <LandscapeModuleVue
                :module="element"
                :landscapeElements="landscapeElements"
                :moduleFlavor="elementFlavor(element.slug())"
                @over="emphasizeModule(element.slug())"
                @out="deEmphasizeModule()"
                @clicked="toggleModule(element.slug())"
                @apply="applyModule(element.slug())"
                v-else
              />
            </li>
          </ul>
        </div>

        <svg
          class="jhipster-landscape-connectors"
          :style="`width: ${landscapeSize.width}px; height: ${landscapeSize.height}px`"
          data-testid="landscape-connectors"
        >
          <path
            v-for="connector in landscapeConnectors"
            class="jhipster-landscape-connectors--line"
            :class="elementFlavor(connector.startingElement)"
            :d="connector.path"
          />
        </svg>
      </div>
    </div>
  </div>

  <div class="jhlite-menu-content-template--menu">
    <div class="jhlite-side-menu">
      <div class="jhlite-side-menu--slot -expand">
        <div class="jhlite-vertical-space -paragraph">
          <div class="jhlite-vertical-space--line">
            <ModulePropertiesFormVue
              :folderPath="folderPath"
              :properties="selectedModulesProperties()"
              :parameters="moduleParametersValues"
              @moduleCommitUpdated="updateModuleCommit"
              @folderPathUpdated="updateFolderPath"
              @folderPathSelected="projectFolderUpdated"
              @propertyUpdated="updateProperty"
              @propertyDeleted="deleteProperty"
            />
          </div>
        </div>
      </div>
      <div class="jhlite-side-menu--slot">
        <ProjectActionsVue
          :folderPath="folderPath"
          :isPrettierButtonEnabled="isApplied('prettier')"
          @operationStarted="operationStarted()"
          @operationEnded="operationEnded()"
        >
          <div class="jhlite-vertical-space--line">
            <button
              class="jhlite-button-main -block"
              data-testid="modules-apply-new-button"
              :disabled="disabledNewApplication()"
              @click="applyNewModules"
            >
              <IconVue name="play-circled" aria-label="Icon play circled" />
              Apply new ({{selectedNewModulesCount()}})
            </button>
          </div>

          <div class="jhlite-vertical-space--line">
            <button
              class="jhlite-button-main -block"
              data-testid="modules-apply-all-button"
              :disabled="disabledAllApplication()"
              @click="applyAllModules"
            >
              <IconVue name="play-circled" aria-label="Icon play circled" />
              Apply selected ({{selectedModulesCount()}})
            </button>
          </div>
        </ProjectActionsVue>
      </div>
    </div>
  </div>
</div>
<LandscapeMiniMapVue :landscapeContainer="landscapeContainer" v-if="canLoadMiniMap" />
